<template>
     <dv-border-box-7 :color="['#084FA0','#06073B']" style="height: 413px;margin-bottom: 14px;">
        <div class="top-box">
        <div class="title-box">
            <span>家床及适老化改造</span>
        </div>
        <div class="pie" ref="pie"></div>
        <div class="sub-title">
            <span>智能化改造设施完成度</span>
        </div>
        <div class="progress" ref="progress"></div>
    </div>

    </dv-border-box-7>

</template>

<script>
import * as echarts from "echarts"

export default {
    data(){
        return{

        }

    },
    mounted(){
        // 拿到进度条的原生dom，注册进度条
        const progress=this.$refs.progress
        const progressEcharts=echarts.init(progress)
        console.log(progressEcharts,"<<<=== progressEcharts");

        // 拿到饼图的原生dom
        const pie=this.$refs.pie
        console.log(pie,"<<<===pie");
        const pieEchart=echarts.init(pie)
        console.log(pieEchart,"<<<===pieEchart实例对象");
        const options={
            legend:{
                show:true,
                left:"80%",
                top:"10%",
                orient:"vertical",
                itemWidth:14,
                textStyle:{
                    color:"#4FA6F7"
                },
                icon:"rect"
            },
            title:{
                text:"服务",
                left:"37%",
                top:"49%",
                textStyle:{
                    color:"#fff",
                    fontSize:15,
                    fontWeight:"normal"
                }
            },
            series:[
                {
                    type:"pie",
                    roseType:"radius",
                    left:"10px",
                    top:"20px",
                    // width:"400",
                    center:["40%","50%"],//圆中心的位置，x,y轴
                    radius:[20,60],//数组第1个是空心圆的半径，第2个是内容圆的半径
                    label:{
                        formatter:function(params){
                            return params.data.value+"%"
                        },
                        color:"#fff",
                    },

                    data:[
                        {
                            name:"生活照料",
                            value:28,
                            label:{
                                color:"#0E8BFF"
                            },
                            labelLine:{
                                lineStyle:{
                                    color:"#0E8BFF"
                                }
                            },
                            itemStyle:{
                                color:"#0E8BFF"
                            }
                        },
                        {
                            name:"个人护理",
                            value:26,
                            label:{
                                color:"#1CDBFE"
                            },
                            labelLine:{
                                lineStyle:{
                                    color:"#1CDBFE"
                                }
                            },
                            itemStyle:{
                                color:"#1CDBFE"
                            }
                        },
                        {
                            name:"康复护理",
                            value:15,
                            label:{
                                color:"#0DDE9C"
                            },
                            labelLine:{
                                lineStyle:{
                                    color:"#0DDE9C"
                                }
                            },
                            itemStyle:{
                                color:"#0DDE9C"
                            }
                        },
                        {
                            name:"医疗保健",
                            value:8,
                            label:{
                                color:"#87AF29"
                            },
                            labelLine:{
                                lineStyle:{
                                    color:"#87AF29"
                                }
                            },
                            itemStyle:{
                                color:"#87AF29"
                            }
                        },
                        {
                            name:"精神慰藉",
                            value:6,
                            label:{
                                color:"#E4C431"
                            },
                            labelLine:{
                                lineStyle:{
                                    color:"#E4C431"
                                }
                            },
                            itemStyle:{
                                color:"#E4C431"
                            }
                        },
                        {
                            name:"定期寻访",
                            value:2,
                            label:{
                                color:"#FB9A44"
                            },
                            labelLine:{
                                lineStyle:{
                                    color:"#FB9A44"
                                }
                            },
                            itemStyle:{
                                color:"#FB9A44"
                            }
                        },
                        {
                            name:"其他服务",
                            value:3,
                            label:{
                                color:"#E54C32"
                            },
                            labelLine:{
                                lineStyle:{
                                    color:"#E54C32"
                                }
                            },
                            itemStyle:{
                                color:"#E54C32"
                            }
                        },
                    ]



                }
            ]

        }

        const progressOptions={
            grid:{
                show:false,
                left:"9%",
                right:"11%",
                top:"5%",
                containLabel:true,
                borderColor:"#fff",
                height:"130px"
            },
            xAxis:{
                type:"value",
                show:true,
                alignTicks:false,
                axisLine:{
                    show:false
                },
                axisTick:{
                    show:false
                },
                axisLabel:{
                    show:false
                },
                splitLine:{
                    show:false
                },
            },
            yAxis:{
                inverse:true,//反向，和写的数据的顺序保持一致
                axisTick:{
                    show:false
                },
                type:"category",
                splitLine:{
                    show:false
                },
                axisLine:{
                    show:false
                },
                axisLabel:{
                    show:true,
                    color:"#fff"
                },

                data:["紧急呼叫","生命体征检测","防走失","防跌倒","安全监控"]
            },
            series:[
                // 亮格子
                {
                    show:true,
                    type:"pictorialBar",
                    symbol:"rect",
                    symbolSize:[10,10],
                    symbolMargin:2,
                    symbolRepeat:true,
                    barWidth:10,
                    itemStyle:{
                        color:"#1CDBFE",
                    },
                    z:3,
                    label:{
                        show:true,
                        formatter:function(params){
                            return params.data.value+"%"
                        }
                    },
                    data:[
                        {
                            name:"紧急呼叫",
                            value:100,
                            label:{
                                show:true,
                                position:[292,0],//文字距离x轴起点325px，距离y轴0px
                                color:"#1CDBFE",
                                fontSize:13
                            }
                        },
                        {
                            name:"生命体征检测",
                            value:95,
                            label:{
                                show:true,
                                position:[292,0],//文字距离x轴起点325px，距离y轴0px
                                color:"#1CDBFE",
                                fontSize:13
                            }
                        },
                        {
                            name:"防走失",
                            value:75,
                            label:{
                                show:true,
                                position:[292,0],//文字距离x轴起点325px，距离y轴0px
                                color:"#1CDBFE",
                                fontSize:13
                            }
                        },
                        {
                            name:"防跌倒",
                            value:60,
                            label:{
                                show:true,
                                position:[292,0],//文字距离x轴起点325px，距离y轴0px
                                color:"#1CDBFE",
                                fontSize:13
                            }
                        },
                        {
                            name:"安全监控",
                            value:75,
                            label:{
                                show:true,
                                position:[292,0],//文字距离x轴起点325px，距离y轴0px
                                color:"#1CDBFE",
                                fontSize:13
                            }
                        }
                    ],


                },
                // 阴影格子
                {
                    show:true,
                    type:"pictorialBar",
                    symbol:"rect",
                    symbolSize:[10,10],
                    symbolMargin:2,
                    symbolRepeat:true,
                    barGap:"-100%",
                    barWidth:10,
                    itemStyle:{
                        color:"#274882"
                    },
                    z:2,
                    data:[100,100,100,100,100]
                },
                // 底条
                {
                    show:true,
                    type:"bar",
                    barGap:"-100%",
                    barWidth:10,
                    labelLine:{
                        show:false
                    },
                    z:1,
                    itemStyle:{
                        color:"transparent"
                    },
                    data:[100,100,100,100,100],

                }
            ]
        }

        // 设置饼图的配置选项
        pieEchart.setOption(options)

        // 设置进度条的配置选项
        progressEcharts.setOption(progressOptions)




    },

    methods:{

    }

}


</script>

<style lang="scss" scoped>
.dv-border-box-7{
    border-radius: 3px;
}

:deep(.dv-border-svg-container) {
  display: none;
}

.top-box{
    height: 100%;
    box-sizing: border-box;
    // border: 1px solid red;
}

.title-box{
    margin-top: 20px;
    margin-left: 41px;
    & span{
        font-size: 22px;
        color: #1CDBFE;
        font-family: Source Han Sans CN;
    };
    & span::before{
        content: "";
        position: absolute;
        display: block;
        top:-2px;
        left: 17px;
        width: 13px;
        height: 27px;
        background-color: #1CDBFE;
        border-radius: 6px;


    }

}

.pie{
    width: 400px;
    height: 200px;
}

.sub-title{
    position: relative;
    margin-left: 59px;
    & span{
        color: #1CDBFE;
        letter-spacing: 1px;

    };
    & span::before{
        content: "";
        position: absolute;
        height: 8px;
        width: 8px;
        // background-color: red;
        border-right: 1px solid #1CDBFE;
        border-top: 1px solid #1CDBFE;
        // border: 1px solid;
        left: -20px;
        top: 3px;
        transform: rotate(45deg);
    };
    & span::after{
        content: "";
        position: absolute;
        top: 3px;
        left:-14px;
        height: 8px;
        width: 8px;
        transform: rotate(45deg);
        border-right: 1px solid #1CDBFE;
        border-top: 1px solid #1CDBFE;

    }


}

.progress{
    height: 138px;
    // border: 1px solid orange;
}


</style>
